<template>
    <el-form ref="mailContent" :rules="rules" :model="mailContent" label-width="auto">
        <el-form-item label="接收人邮箱" prop="to">
            <el-input name="to" auto-complete="on" v-model="mailContent.to" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="主题" prop="subject">
            <el-input v-model="mailContent.subject" maxlength="200"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="text">
            <mavon-editor ref="md" @imgAdd="imgAdd" v-model="mailContent.text" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('mailContent')">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import MarkdownIt from 'markdown-it';
import alter from '@/js/axios'

export default {
    name: "mailSend",
    data() {
        return {
            token: "",
            mailContent: {
                subject: "",
                to: "",
                text: ""
            },
            rules: {
                to: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                subject: [
                    { required: true, message: '请输入主题', trigger: 'blur' }
                ],
                text: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                ]
            }
        }
    },
    created() {
        this.getUpToken()
    },
    methods: {
        getUpToken() {
            this.$axios.get("/sys/qiniu/getUpToken").then(res => {
                this.token = res.data.data
            })
        },
        imgAdd(pos, file) {
            if (this.$common.isEmpty(this.token)) {
                alter.errorMessage("上传出错！")
                return;
            }
            let suffix = "";
            if (file.name.lastIndexOf('.') !== -1) {
                suffix = file.name.substring(file.name.lastIndexOf('.'));
            }

            let fd = new FormData();
            fd.append("file", file);
            fd.append("token", this.token);
            fd.append("key", "smMailImage" + "/" + this.$store.getters.getUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.getters.getUser.id + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix);

            this.$axios.post(this.$global_msg.qiniuUrl, fd).then(res => {
                console.log(res, "res")
                if (!this.$common.isEmpty(res.data.key)) {
                    let url = this.$global_msg.qiniuDownload + res.data.key;
                    console.log(url)
                    this.$refs.md.$img2Url(pos, url);
                }
            })
        },
        // 表单重置
        reset() {
            this.mailContent = {
                subject: "",
                to: "",
                text: ""
            };
            this.$refs['mailContent'].resetFields();
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //将markdowm格式转化为html
                    const md = new MarkdownIt({ breaks: true });
                    this.mailContent.text = md.render(this.mailContent.text);
                    this.$axios.post("/sys/mail/sendMail", this.mailContent).then(() => {
                        this.reset()
                    })
                }
            });
        },
    }
}
</script>